<template>
  <view>
    <block>
      <!-- 当前的提货点的展示 -->
      <tm-sheet _class="flex flex-row" 
      :color="isCurrentShop ? 'yellow' : '#eee'" 
      :margin="[0]" :padding="[0]"
      @clcik='changePickUpLocation(shop.leaderId)'
      >
        <!-- 图片以及是否是当前提货点 -->
        <tm-sheet :margin="[0]" :padding="[0]" _class="relative">
          <tm-tag
            size="xs"
            label="当前提货点"
            color="red"
            :padding="[0]"
            :margin="[0]"
            :round="0"
            class="flex absolute zIndex-2"
            v-if="isCurrentShop"
          ></tm-tag>
          <tm-image :src="shop.storePath" :width="160" :height="160"></tm-image>
        </tm-sheet>
        <!-- 店名以及距离 -->
        <view class="flex flex-row flex-row-center-between fulled ml-10">
          <tm-sheet :margin="[0]" :padding="[9]" class="flex-1" :transprent="true">
            <tm-text _class="text-weight-b" :fontSize="32" :label="shop.takeName"></tm-text>
            <tm-text color="red" class="mt-5 mb-5" :label="`距离最近距离${shop.distance}公里`"></tm-text>
            <tm-text :label="shop.detailAddress"></tm-text>
          </tm-sheet>
          <tm-icon name="tmicon-check-circle-fill" :color="isCurrentShop ? 'red' : 'grey'" class="pr-10 pl-10"></tm-icon>
        </view>
      </tm-sheet>
    </block>
  </view>
</template>
<script lang="ts" setup>
import { ref, defineProps } from 'vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmTag from '@/tmui/components/tm-tag/tm-tag.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import type { shopInterface } from '@/types'


//接收参数
defineProps<{
  shop: shopInterface
  isCurrentShop: boolean
}>()

// 定义事件
const emit = defineEmits(["selectLeaderAddress"]);

// 提货点切换
const changePickUpLocation = (id: number) => {
  emit("selectLeaderAddress", id); // 触发 selectLeaderAddress 事件并传递 id 参数
};
</script>
<style lang="scss"></style>
